<template>
  <el-container>
    <!-- <el-header style="background-color: #409EFF; font-size: 20px;">考情信息</el-header> -->
    <el-main>
      <el-button type="success" round :disabled="isDisabled" @click="addWorkTime">上班打卡</el-button>
      <el-button type="warning" round :disabled="isDisabled2" @click="addQuitTime">下班打卡</el-button>
      <br><br><br>

      <el-form :inline="true" :model="pageObject" class="demo-form-inline">
        <el-form-item label="员工姓名">
          <el-input v-model="pageObject.userName" placeholder="请输入姓名"></el-input>
        </el-form-item>
        <el-form-item label="开始日期">
          <el-date-picker
            v-model="pageObject.workTime"
            type="date" value-format="yyyy-MM-dd HH:mm:ss" formate="yyyy-MM-dd HH:mm:ss"
            placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="结束日期">
          <el-date-picker
            v-model="pageObject.quitTime"
            type="date" value-format="yyyy-MM-dd HH:mm:ss" formate="yyyy-MM-dd HH:mm:ss"
            placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>

       <!-- <el-form-item label="部门">
          <el-select v-model="question.quType" placeholder="请选择部门">
            <el-option label="人力资源部" value="0"></el-option>
            <el-option label="市场部" value="1"></el-option>
            <el-option label="研发部" value="2"></el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item>
          <el-button type="primary" @click="loadData">查询</el-button>
        </el-form-item>
      </el-form>

      <el-table :data="list" stripe style="width: 100%; ">
        <!-- 列 -->
        <el-table-column label="员工编号" prop="userId" width="155" align="center"></el-table-column>
        <el-table-column label="员工姓名" prop="userName" width="155" align="center"></el-table-column>
        <el-table-column label="考勤日期" prop="date" width="155" align="center"></el-table-column>
        <el-table-column label="签到时间" prop="workTime" width="155" align="center"></el-table-column>
        <el-table-column label="签退时间" prop="quitTime" width="155" align="center"></el-table-column>
        <el-table-column label="迟到次数" prop="late" width="155" align="center"></el-table-column>
        <el-table-column label="早退次数" prop="early" width="155" align="center"></el-table-column>
        <el-table-column label="缺勤次数" prop="lack" align="center"></el-table-column>
      </el-table>

      <div class="block">
        <!-- size-change：下拉框触发事件 -->
        <!-- current-change 页码触发事件 -->
        <!-- current-page 当前页码 -->
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="pageObject.page" :page-sizes="[5, 10, 20, 40]" :page-size="5"
          layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </div>

    </el-main>
  </el-container>
</template>

<script>
  export default {
    data() {
      return {
        list: [], //当前页集合
        totalPage: "", //总页数
        total: 0, //总条数
        pageObject: { //分页对象
          page: 1,
          row: 5,
          userName: "",
          workTime:"",
          quitTime:"",
        },
        isShow: false,
        isOption: true,
        user: {
          userId:0,
          userNum:"",
          userName: "",
          userPwd: "",
          sex:"",
          phone: "",
          email:"",
          departmentId:0,
          salt:"",
          roleId:0
        },
        workNote:{
          workId:0,
          userId:0,
          userName:"",
          date:"",
          workTime:"",
          quitTime:"",
          late:0,
          early:0,
          lack:0,
          page: 1,
          row: 5,
        },
        isDisabled:false,
        isDisabled2:false,
      }
    },
    methods: {
      addWorkTime(){
        console.log(this.user);
        var self = this;
        this.$http.post("http://localhost:8080/work-note/addWorkTime", this.$qs.stringify(this.user))
        .then(function(res){
          self.$message(res.data.info);
          if(res.data.success){
            self.isDisabled=true;
          }else{

          }
        })
      },
      addQuitTime(){
        console.log(this.user);
        var self = this;
        this.$http.post("http://localhost:8080/work-note/addQuitTime", this.$qs.stringify(this.user))
        .then(function(res){
          self.$message(res.data.info);
          if(res.data.success){
            self.isDisabled2=true;
          }else{

          }
        })
      },
      //加载数据
      loadData() {
        console.log(this.pageObject);
        var self = this;
        this.$http.get("http://localhost:8080/work-note/selectAttendanceRecords", {
            params: this.pageObject
          })
          .then(function(rs) {
            if (rs.data.success) {
              self.list=rs.data.data.list.records;
              console.log(self.list);
              self.totalPage = rs.data.data.totalPage;
              self.total = rs.data.data.total;
            }
          })
      },
      //下拉框触发事件
      handleSizeChange(v) {
        this.pageObject.row = v;
        this.loadData();
      },
      handleCurrentChange(v) {
        this.pageObject.page = v;
        this.loadData();
      },
    },
    mounted() {
      var u = JSON.parse(sessionStorage.getItem("user"));
      console.log(u);
      this.user.userId=u.userId;
      this.user.userName=u.userName;
      this.user.departmentId=u.departmentId;
      // this.user=u;
      console.log(this.user);
      this.loadData();
    }
  }
</script>

<style>
</style>
